<template>
    <Layout class="layout-container login-style cloud-bg-style">
        <Content>
            <Form ref="loginform" :model="value" :rules="rules" class="login-form">
                <h1>{{$t('system.name')}}</h1>
                <FormItem prop="username" class="form-item-width">
                    <Input type="text" v-model="value.username" :placeholder="$t('login.username')" :disabled="submiting">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password" class="form-item-width">
                    <Input type="password" v-model="value.password" :placeholder="$t('login.password')" :disabled="submiting">
                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem class="form-item-width">
                    <Button type="primary" html-type="submit" @click.prevent="login" :disabled="submiting" long>{{button.text}}</Button>
                </FormItem>
            </Form>
        </Content>
    </Layout>
</template>
<script type="text/javascript">
import { init } from 'config/utils';
import { login } from 'config/api';
import { Layout, Content, Form, FormItem, Button, Icon, Input } from 'view-design';

const MIN_PASSWORD = 6;

export default {
    data() {
        return {
            submiting: false,
            button: {
                text: this.$t("login.submit")
            },
            value: {
                username: '',
                password: '',
                host: '',
                rememberMe: 0
            },
            rules: {
                username: { 
                    label: this.$t('login.username'),
                    required: true, 
                    trigger: 'blur' 
                },
                password: {
                    label: this.$t('login.password'),
                    type: 'string',
                    required: true,
                    min: MIN_PASSWORD,
                    trigger: 'blur'
                }
            }
        };
    },
    methods: {

        login() {
            this.$refs["loginform"].validate((valid) => {
                if (valid) {
                    this.submiting = true;
                    this.button.text = this.$t("login.waiting");
                    login(this.value, (res) => {
                        if(res.success) {
                            init();
                        } else {
                            this.submiting = false;
                            this.button.text = this.$t("login.submit");
                        }
                    });
                }
            });
        }
    },
    components: {
        Layout,
        Content,
        Form,
        FormItem,
        Button,
        Icon,
        Input
    }
}
</script>
<style type="text/css">
.login-style h1 {
    color: #7E7E7E;
    font: bold 25px Helvetica, Arial, sans-serif;
    letter-spacing: -0.05em;
    line-height: 20px;
    margin: 0 0 20px;
    text-align: center;
}

.login-style h1:before,
.login-style h1:after {
    content: "";
    height: 1px;
    position: absolute;
    top: 50px;
    width: 20%;
}

.login-style h1:after {
    background: rgb(126,126,126);
    background: -moz-linear-gradient(left,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    right: 0;
}

.login-style h1:before {
    background: rgb(126,126,126);
    background: -moz-linear-gradient(right,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    left: 0;
}

.layout-container form.login-form {
    position: absolute;
    background-color: white;
    padding: 40px 20px 10px 20px;
    width: 400px;
    height: 300px;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -150px;
}

.form-item-width {
    width: 100%;
}
</style>